<template>
  <div id="container">
    <h4 style="font-family:'Helvetica Neue';text-align: left;color: #f22d00;font-weight: bolder" ><em class="el-icon-star-off"></em>~~~</h4>
    <h1>商品下单</h1>
    <br>
    <div class="pro_comment">
      <div id="sales">
        <el-table :data="tableData" style="width: 98%;margin-top: 1%;margin-left: 1%;margin-right: 1%">
          <el-table-column prop="good" label="宝贝" width="300">

          </el-table-column>
          <el-table-column prop="price" label="单价" width="300">
          </el-table-column>
          <el-table-column prop="num" label="数量" width="300">
            1
          </el-table-column>
        </el-table>
      </div>

      <br>
      <div>
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" style="padding:10px;" v-for="(fit) in fits">
            <el-card :id="fit.id" class="addresslist" style="padding:0px;" >
            <div style="padding: 14px;" v-on:click="adress_click(fit)">
              <div>收货人:{{fit.收货人}}</div>

              <div>手机号:{{fit.手机号}}</div>

              <div>地址:{{fit.地址}}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      </div>

      <br style="height: 1px;background-color: palevioletred">
      <el-button id="add_order_bu" type="primary" :disabled="bu" style="float: right;width: 100px" v-on:click="add_order">结算</el-button>
      <br>
      <br>
      <br>
    </div>
  </div>

</template>

<script>
  import qs from 'qs';
  import axios from 'axios'
  const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    created(){

    },
    data() {
      return {
        tableData:[{good:111,price:222,num:1,}],
        good:'',
        fits: [],
        sort_id:'',
        url: '',
        name:'',
        address_id:'null',
        order_id:'',
        bu:true,
        id:''//商品id
      }
    },
    mounted(){
      this.getdata();
      this.get_commidity();
    },

    watch:{
      "$route":"flush"
    },
    methods: {
      open() { //下单模态框
        this.$confirm('是否进行付款?', '提示', {
          confirmButtonText: '立即付款',
          cancelButtonText: '稍后付款',
          type: 'warning'
        }).then(() => {
          this.pay();
        }).catch(() => {
          this.$router.back();
        });
      },
      pay_success() { //付款模态框

         this.$alert('付款成功', 'tip', {
           confirmButtonText: '确定',
           callback: action => {
             this.$router.back();
           } });

      },
      adress_click(item)
      {

        let cc= document.getElementsByClassName('addresslist');
        for(let i=0;i<cc.length;i++)
        {
          cc[i].style.border="";
        }
        document.getElementById(item.id).style.border="1px solid blue";
        this.address_id=item.id;
        this.bu=false;

      },
      flush()
      {
        this.getdata();//我的地址列表
        this.get_commidity();//获取商品详情数据
        this.bu=true;
        this.address_id='null';
        let cc= document.getElementsByClassName('addresslist');
        for(let i=0;i<cc.length;i++)
        {
          cc[i].style.border="";
        }
      },
      get_commidity(){
        axios.post(BASE_URL +'/commodity/get_commodity_info',
          qs.stringify({id:this.getpar('id')}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re =>{
            console.log(re.data.备注);
            if(re.data.状态码 === 200)
            {
              this.tableData[0].good=re.data.商品名称;
              this.tableData[0].price=re.data.商品价格;
              console.log(re.data.备注);
            }
            else
            {
            }
          })
          .catch((error =>{
            console.log(error)
          }))
      },
      pay(){
        axios.post(BASE_URL + '/order/pay_order',
          qs.stringify({
            token: window.localStorage.getItem('token'), id: this.order_id}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            console.log(re.data.备注);
            if (re.data.状态码 === 200) {

              this.pay_success();

            } else {
            }
          })
          .catch((error => {
            console.log(error)
          }))
      },
      add_order(){//下单
        if(this.address_id.length==48) {
          axios.post(BASE_URL + '/order/add_order',
            qs.stringify({
              token: window.localStorage.getItem('token'), address_id: this.address_id,
              commodity_id: this.getpar('id')
            }),
            {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(re => {
              console.log(re.data.备注);
              if (re.data.状态码 === 200) {
                this.order_id=re.data.订单id;
                this.open();
              } else {
              }
            })
            .catch((error => {
              console.log(error)
            }))
        }
      },
      getdata()
      {
        this.name=this.getpar('name');//读取home 传来的参数 name  id 商品的id
        console.log("fff"+this.getpar('name'));
        axios.post(BASE_URL +'/address/get_address_list',
          qs.stringify({token:window.localStorage.getItem('token')}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re =>{
            console.log(re.data.备注);
            if(re.data.状态码 === 200)
            {
              // this.userInfo.id=true;
              this.fits= re.data.列表;

              console.log(this.fits);
              console.log(re.data.备注);
            }
            else
            {
            }
          })
          .catch((error =>{
            console.log(error)
          }))
      },
      go_add_order(item)
      {

        this.$router.push('/add_order#id='+item.商品id);
      },
      getpar(par){
        //获取当前URL
        let local_url = document.location.href;
        //获取要取得的get参数位置
        let get = local_url.indexOf(par + "=");
        if (get == -1) {
          return "";
        }
        //截取字符串
        let get_par = local_url.slice(par.length + get + 1);
        //判断截取后的字符串是否还有其他get参数
        let nextPar = get_par.indexOf("&");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);

        }
        nextPar = get_par.indexOf("?");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        nextPar = get_par.indexOf("#");
        if (nextPar != -1) {
          get_par = get_par.slice(0, nextPar);
        }
        return decodeURI(get_par);
      },
      get_image(id)
      {
        return BASE_URL+"/images/small/"+id+".jpg";
      }
    },


  }
</script>

<style scoped>
  #container{
    width: 100%;
    /*height: 100%;*/
    background-color: #f3f3f3;
  }
  h1{
    font-family: "微软雅黑";
    color: #000000;
    width: auto;
    height: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;

  }

  .pro_comment{
    width: 73%;
    position: relative;
    margin: 40px auto 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-bottom: none;
  }
  .grid-content  {
    margin-left: 10px;
    margin-right: 10px;
    /*background-coclor: rgb(44, 143, 121);*/
    /*background-image: url("./img/pro16.jpg");*/
    border-radius: 4px;
    min-height: 400px;
    min-width: 50px;
  }
  .el-table th>.cell {
    position: relative;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    padding-left: 14px;
    text-align: center;
  }

</style>

